<template>
	<gracePage :isSwitchPage="true" :headerHeight="0">
		<view slot="gBody" class="grace-body">
			<view class="grace-margin-top" style="padding:20rpx 0;">
				<text class="grace-h3 grace-bold grace-white">个人中心</text>
			</view>
			<view class="grace-list" @tap="login">
				<view class="grace-list-items">
					<view class="grace-list-image ucenter-face grace-relative">
						<image class="grace-list-image ucenter-face-image" :src="userImage"></image>
					</view>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text grace-white">{{phone}}</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right grace-white"></text>
				</view>
			</view>
			<!-- 横向展示栏 -->
			<view class="ucenter-line"></view>
			<view>
				<graceBoxBanner background="rgba(255,255,255,0.1)" :color="['#FFFFFF', '#FFFFFF', '#FFFFFF']" 
				:fontSize="['35rpx', '22rpx', '35rpx']" :items="items" v-on:taped ='graceBoxBannerTaped'></graceBoxBanner>
			</view>			
			<view class="ucenter-line"></view>
			<!-- 白色内容区域 -->
			<view class="white-body" v-if="itemNull">
				<view class="grace-title grace-margin-top">
					<view class="grace-title-border"></view>
					<text class="grace-title-text grace-h3" :style="{color:mainColor}">{{appName}}</text>
					<!-- <text class="iconfont icon-shangbiao grace-gray" style="font-size: small;"></text> -->
					<text class="grace-text-small grace-gray">{{version}}</text>
				</view>					
				<view>
					<view class="grace-text grace-black grace-margin-top" style="font-size:medium">{{appDes}}</view>
				</view>
				<!-- 组件列表区域 -->
				<view class="grace-title grace-margin-top">
					<view class="grace-title-border"></view>
					<text class="grace-title-text grace-h3" :style="{color:mainColor}">服务内容</text>
					<!-- <text class="iconfont icon-weixin grace-gray" style="font-size: small;"></text> -->
					<!-- <text class="grace-text-small grace-gray">服务商南</text> -->
				</view>						
				<view class="grace-wrap" style="margin-top:16rpx;">
					<text @tap="serviceList(item)" class="grace-tags-large grace-border-radius margin" style="background-color: #3688FF;" v-for="(item, index) in list1" :key="index">{{item}}</text>
				</view>
			</view>			
			<view class="ucenter-line1 grace-margin-top"></view>
			<view class="grace-list grace-margin-top">		
				<view class="grace-list-items" @tap="orderList">
					<text class="grace-list-icon grace-icons icon-order" :style="{color:mainColor}"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">订单列表</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>				
			</view>
			<view class="grace-list grace-margin-top">
				<view class="grace-list-items" @tap="hardwareIndex">
					<text class="grace-list-icon grace-icons icon-order" :style="{color:mainColor}"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">设备列表</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>				
			</view>
			<!-- <view class="ucenter-line"></view> -->
<!-- 			<view class="grace-list grace-margin-top">
				<view class="grace-list-items" @tap="examination">
					<text class="grace-list-icon grace-icons icon-article" :style="{color:mainColor}"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">我的考试</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>				
			</view>
			<view class="ucenter-line"></view> -->
			<view class="grace-list grace-margin-top">
				<view class="grace-list-items" @tap="complaint">
					<text class="grace-list-icon grace-icons icon-kf1" :style="{color:mainColor}"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">联系客服</text>							
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>				
			</view>
			<view class="ucenter-line"></view>		
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/components/gracePage.vue";
import graceBoxBanner from "../../graceUI/components/graceBoxBanner.vue";
var _self;
export default {
	data() {
		return {
			itemNull: false,
			userImage : "../../static/logo.png",
			mainColor : '',
			appName : '',
			appDes : "",
			phone : "未登录",//没有登录时显示
			userInfoData : "",
			items: [
				[0, '', '租赁时间'],
				[0, '', '归还时间']
			],
			list1:[],
			list1Str:'油箱监控,远程通知',
			version:"",
			token:"",
			wuLuCode:"",
			hardwareInfo:{
				createTime:"",
				field2:"",
				field3:"",
				field5:"",
				field7:"",
				field8:"",
				field9:"",
				field10:"",
				field11:"",
				field12:""
			},
		}
	},
	onLoad: async function(e){
		_self = this;
		_self.mainColor = _self.$myFunction.appConfig().mainColor;
		_self.list1 = _self.list1Str.split(',');
		_self.version = "V"+_self.$myFunction.appConfig().version;	
		try{
			//页面加载时读取一次缓存
			_self.userInfoData = _self.$myFunction.appStorage('wuLuUserInfo');
			//获取token，同步方法
			_self.token =  await _self.$myFunction.getToken();
			_self.token = _self.token.token;			//获取应用名称、描述
			// var wuLuAppInfo = _self.$myFunction.appStorage('wuLuAppInfo');
			// _self.appName = wuLuAppInfo.field5;
			// _self.appDes = wuLuAppInfo.field6;
			// if(_self.$myFunction.isEmpty(_self.appName)){
			// 	_self.itemNull = false;
			// }else{
			// 	_self.itemNull = true;
				
				if(!_self.$myFunction.isEmpty(_self.userInfoData)){
					//获取用户信息
					// _self.userImage = _self.userInfoData.field3;							
					_self.phone = _self.userInfoData.field2.substr(0,3)+"****"+_self.userInfoData.field2.substr(7);	
				}
			// }
			_self.wuLuCode = _self.$myFunction.appStorage('wuLuCode');
			if(!_self.$myFunction.isEmpty(_self.wuLuCode)){
				//借还情况
				_self.readHardwareIMEI();	
			}
		}catch(e){}
	},
	onShow:function(e){
		uni.$on('loginRefresh',function(data){
			_self.userInfoData = _self.$myFunction.appStorage('wuLuUserInfo');
			_self.$myFunction.displayLog("登录成功后刷新【我的】界面，从缓存中读取到的用户数据："+JSON.stringify(_self.userInfoData));
			try{
				if(!_self.$myFunction.isEmpty(_self.userInfoData)){
					// _self.userImage = _self.userInfoData.field3;							
					_self.phone = _self.userInfoData.field2.substr(0,3)+"****"+_self.userInfoData.field2.substr(7);				
				}
				
			}catch(e){}
		})
		//选择服务区域后，重新加载应用名称、描述
		// uni.$on('objectsIndexFresh',function(data){
		// 	_self.$myFunction.displayLog("objectsIndexFresh事件触发mine/index页面刷新");
		// 	//获取应用名称、描述
		// 	var wuLuAppInfo = _self.$myFunction.appStorage('wuLuAppInfo');
		// 	_self.$myFunction.displayLog("从缓存中获取到的应用信息："+JSON.stringify(wuLuAppInfo));
		// 	_self.appName = wuLuAppInfo.field5;
		// 	_self.appDes = wuLuAppInfo.field6;
		// 	if(_self.$myFunction.isEmpty(_self.appName)){
		// 		_self.itemNull = false;
		// 	}else{
		// 		_self.itemNull = true;
		// 	}
		// })	
		//获取物录编码
		//延时执行，防止第一次显示页面提示框一闪而过
		// setTimeout(function() {
		// 	var wuLuCode = _self.$myFunction.appStorage('wuLuCode');
		// 	if(_self.$myFunction.isEmpty(wuLuCode)){
		// 		uni.showToast({title: '服务未开通',icon: 'none'});
		// 		setTimeout(function() {
		// 			uni.switchTab({url:"/pages/object/index"})
		// 		}, 1500);
		// 	}
		// }, 500);
		_self.wuLuCode = _self.$myFunction.appStorage('wuLuCode');
		if(!_self.$myFunction.isEmpty(_self.wuLuCode)){
			//借还情况
			_self.readHardwareIMEI();	
		}
	},	
	methods:{
		login : function(){
			uni.navigateTo({
				url:"../loginReg/index"
			})
		},
		//设备列表
		hardwareIndex : function(){
			_self.userInfoData = _self.$myFunction.appStorage('wuLuUserInfo');
			if(!_self.userInfoData){
				uni.showToast({title: '您未登录',icon: 'none'});//默认显示1500毫秒
				setTimeout(function () {
					uni.navigateTo({
						url:"../loginReg/index"
					})	
				}, 1500);
			}else{
				uni.navigateTo({
					url:"../hardware/index"
				})
			}			
		},
		//订单列表
		orderList : function(){
			_self.userInfoData = _self.$myFunction.appStorage('wuLuUserInfo');
			if(!_self.userInfoData){
				uni.showToast({title: '您未登录',icon: 'none'});//默认显示1500毫秒
				setTimeout(function () {
					uni.navigateTo({
						url:"../loginReg/index"
					})	
				}, 1500);
			}else{
				uni.navigateTo({
					url:"../order/index"
				})
			}			
		},
		graceBoxBannerTaped : function(e){
			// if(e == 1){
			// 	uni.navigateTo({
			// 		url:"../repairOrderForUser/index?state=finish"
			// 	});					
			// }else if(e == 2){
			// 	uni.navigateTo({
			// 		url:"../repairOrderForUser/index?state=finish"
			// 	});					
			// }
		},
		complaint:function(){
			uni.showModal({
				title: '提示',
				content: '开始拨打客服电话？',
				success: function (res) {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber:"18609146371" 
						});							
					} else if (res.cancel) {
						return;
					}
				}
			});						
		},	
		serviceList:function(temp){
			if(temp == "区域资源"){
				uni.switchTab({url:"/pages/object/index"})
			}else if(temp == "区域需求"){
				uni.switchTab({url:"/pages/object/add"})
			}
		},
		// 根据编码获取硬件信息
		readHardwareIMEI:function(){
			 var params = {
				"field1":_self.wuLuCode
			 };
			 _self.$myFunction.displayLog("field1:"+_self.wuLuCode);
			 //重新获取一次token，防止接口返回认证失败系统重新获取的token未被使用
			 _self.token = _self.$myFunction.appStorage('wuLuToken').token;
			 uni.request({
				url:  _self.$myFunction.appConfig().serverAddress+'hardwareList',
				data: params, 
				method : "POST",
				header : {
					'content-type':'application/x-www-form-urlencoded',
					'Authentication':_self.token
				},	
				success: data => {
					uni.hideToast();
					_self.$myFunction.displayLog("readHardwareIMEI服务器返回数据："+JSON.stringify(data));
					if (data.data.code == 200) {
						if(data.data.data.rows.length > 0){
							_self.hardwareInfo = data.data.data.rows[0];	
							//使用时长
							if(_self.hardwareInfo.field9 == "借出"){
								if(!_self.$myFunction.isEmpty(_self.hardwareInfo.field10)){
									// var startDateTemp = _self.hardwareInfo.field10.replace(/-/g,'/')   //为了兼容IOS，需先将字符串转换为'2018/9/11 9:11:23'
									// var startDate = Date.parse(startDateTemp);
									// _self.$myFunction.displayLog("startDate:"+startDate);
									// var endDateTemp = _self.$myFunction.nowTime("Y-m-d H:i:s").replace(/-/g,'/')   //为了兼容IOS，需先将字符串转换为'2018/9/11 9:11:23'
									// var endDate = Date.parse(endDateTemp);
									// _self.$myFunction.displayLog("endDate:"+endDate);
									// var munites=parseInt((endDate - startDate)/(60*60*1000));
									// _self.$myFunction.displayLog("munites:"+munites);
									_self.items[0].splice(0, 1, _self.hardwareInfo.field10.slice(5,19));
								}else{
									_self.items[0].splice(0, 1, 0);
								}
								if(!_self.$myFunction.isEmpty(_self.hardwareInfo.field11)){
									_self.items[1].splice(0, 1, _self.hardwareInfo.field11.slice(5,19));
								}else{
									_self.items[1].splice(0, 1, 0);
								}
							}else{
								_self.items[0].splice(0, 1, "无设备");
								_self.items[1].splice(0, 1, "无设备");
							}
						}else{
							// my_alert(".my_alert","设备未接入网络",true,"warning");
							uni.showToast({title: '设备未接入网络',icon: 'none'});
						}
					}else{
						//如果请求数据因token认证失败，则清空缓存token
						if(data.data.message.indexOf("接口访问未认证") != -1){
							uni.setStorage({
								key: 'wuLuToken',
								data: "",
								success: function () {	
									_self.$myFunction.displayLog("清空缓存token");
									//触发重新获取token
									_self.$myFunction.getToken();
									// 关闭所有页面，打开到应用内的某个页面。
									_self.$myFunction.displayLog("重加载当前页面");
									uni.reLaunch({
										url: '/pages/object/index'
									});
								}
							});
						}	
					}					
				},
				fail: (data, code) => {
					uni.hideToast();
					uni.showToast({title: '连接失败...',icon: 'none'});
				}
			 })
		},
		functionTest : function(){
			uni.showToast({title: '调试中...',icon: 'none'});
		}				
	},
	components:{
		gracePage, graceBoxBanner
	}
}
</script>
<style>
	page{background-image:linear-gradient(to bottom, #255fb0,#3688FF); background-repeat:no-repeat; background-size:100% 500rpx; background-color:#F6F7F8;}
	.ucenter-face{width:100rpx !important; height:100rpx !important;}
	.ucenter-face-image{width:100rpx !important; height:100rpx !important;}
	.ucenter-line{height:12rpx; background-color:#F4F5F6; margin:16rpx 0;}
	.ucenter-line1{height:12rpx; margin:16rpx 0;}
	.grace-list-title-text{font-size:35rpx !important;}

	.white-body{width:100%; margin-top:50rpx; padding:25rpx; box-sizing:border-box; border-radius:10rpx;}
	.margin{margin:10rpx 10rpx 0 0;}
	.grace-title-border{width:8rpx; background:#3688FF; margin-right:16rpx; height:28rpx; flex-shrink:0;}
</style>